<template>
  <ul class="tw-libiconsummaries" :class="{xcolumn: isColumn, xwrap: resultColumns > 0, [`x${_uid}`]:true}">
    <li class="tw-iconsummary-item"
      :class="{xhashref: item.href}"
      v-for="(item, idx) in data"
      :key="idx"
      :style="{marginTop: resultColumns > 0 && idx + 1 > resultColumns ? itemSpacing : '0'}"
      @click="clickItem(item)">
      <div class="tw-iconsummary-item-iconbox">
        <img v-if="item.imgUrl" class="xicon" :src="item.imgUrl" />
        <img v-else-if="icons[idx]" class="xicon" :src="`${$twApp.fileBaseUrl}${icons[idx].localPath}`" />
      </div>

      <div class="tw-iconsummary-item-body">
        <h3 class="tw-iconsummary-item-title" v-html="item.title"></h3>
        <div class="tw-iconsummary-item-des">
          <span v-if="item.content">{{item.content}}</span>
          <span v-if="item.html" v-html="item.html"></span>
          <i v-if="item.trend === 'down'" class="iconfont xdown">&#xe62a;</i>
          <i v-if="item.trend === 'up'" class="iconfont xup">&#xe60b;</i>
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'
import border from '../tw-lib-base/border/mixins'

export default {
  name: 'lib-iconsummary-list',

  mixins: [props, style, border],

  props,

  computed: {
    resultColumns () {
      const columns = parseInt(this.columns)

      return columns && columns > 0 ? columns : 0
    },

    style () {
      return Object.assign({
        columns: this.columns,
        itemSpacing: this.itemSpacing,
        itemBg: this.itemBg,
        itemHeight: this.itemHeight,
        itemPadding: this.itemPadding,
        iconWidth: this.iconWidth,
        iconHeight: this.iconHeight,
        fontFamily: this.fontFamily,
        titleFontSize: this.titleFontSize,
        titleFontColor: this.titleFontColor,
        desFontSize: this.desFontSize,
        desFontColor: this.desFontColor,
        fontIconSize: this.fontIconSize,
        upIconColor: this.upIconColor,
        downIconColor: this.downIconColor,
        familyText: this.familyText
      }, this.borderStyle)
    }
  },

  methods: {
    clickItem (item) {
      if (item.href) {
        if (item.target === '_blank') {
          window.open(item.href, '_blank')
        } else {
          window.location.href = item.href
        }
      }
    },

    setStyle () {
      let style = `
        ::root > .tw-iconsummary-item {
          height: ${this.itemHeight};
          padding: ${this.itemPadding};
          background: ${this.itemBg};
          font-family: ${this.familyText};
        }

        ::root > .tw-iconsummary-item > .tw-iconsummary-item-iconbox  {
          width: ${this.iconWidth};
          height: ${this.iconHeight};
        }

        ::root > .tw-iconsummary-item .tw-iconsummary-item-title {
          font-size: ${this.titleFontSize};
          color: ${this.titleFontColor};
        }

        ::root > .tw-iconsummary-item + .tw-iconsummary-item {
          margin-left: ${this.itemSpacing};
        }

        ::root > .tw-iconsummary-item .tw-iconsummary-item-des {
          font-size: ${this.desFontSize};
          color: ${this.desFontColor};
          font-family: ${this.familyText};
        }

        ::root > .tw-iconsummary-item .tw-iconsummary-item-des > .iconfont {
          font-size: ${this.fontIconSize};
        }

        ::root > .tw-iconsummary-item .tw-iconsummary-item-des > .iconfont.xdown {
          color: ${this.upIconColor};
        }

        ::root > .tw-iconsummary-item .tw-iconsummary-item-des > .iconfont.xup {
          color: ${this.downIconColor};
        }
      `

      if (this.resultColumns > 0) {
        style += `
          ::root > .tw-iconsummary-item {
            width: calc((100% - ${(this.columns - 1) * parseInt(this.itemSpacing || 0)}px)/${this.columns});
          }

          ::root > .tw-iconsummary-item:nth-child(${this.resultColumns}n+1) {
            margin-left: 0;
          }
        `
      }

      if (this.fontFamily) {
        style += `
          .tw-iconsummary-item {
            font-family: ${this.fontFamily};
          }
        `
      }

      if (this.hasBorder) {
        const border = `${this.borderSize} ${this.borderType} ${this.borderColor}`

        if (this.borderPosition.includes(0)) {
          style += `
              ::root > .tw-iconsummary-item {
                border-top: ${border};
              }
            `
        }

        if (this.borderPosition.includes(1)) {
          style += `
              ::root > .tw-iconsummary-item {
                border-bottom: ${border};
              }
            `
        }

        if (this.borderPosition.includes(2)) {
          style += `
            ::root > .tw-iconsummary-item {
                border-left: ${border};
              }
            `
        }

        if (this.borderPosition.includes(3)) {
          style += `
            ::root > .tw-iconsummary-item {
              border-right: ${border};
            }
          `
        }

        style += `
          ::root > .tw-iconsummary-item {
            border-radius: ${this.borderRadius};
        }
        `
      }

      this.addStyle(style)
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
